<template>
<div class="detailwarp">
 <div class="de-top">
			<i class="i back icon-arrow_lift" @click="goback"></i>
			订单详情
 </div>
 <vue-loading v-show="showload" type="bubbles" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>
  <div v-show="showcontent" class="d-content">
        <ul>
            <li v-for="(item,index) in detaildata.orderFormList" :key="index"><span>{{item.commodityName}}</span><span>x{{item.quality}}&nbsp&nbsp&nbsp￥{{item.paidPrice}}</span></li>
        </ul>
        <split2></split2>  
        <p><span>订单总金额</span><span>￥{{detaildata.totalPrice}}</span></p>
        <p><span>订单编号</span><span>{{detaildata.id}}</span></p> 
        <p><span>订单时间</span><span>{{detaildata.updateDate}}</span></p>  
        <split2></split2> 
        <p class="paid">实付 {{detaildata.paidPrice}}</p>
  </div>    
</div>
  
</template>

<script>
import qs from 'qs'	
import vueLoading from 'vue-loading-template'
import axios from 'axios'
import split2 from './split2'
export default {
  name:'orderdetail',
  data(){
    return{
      detaildata:{},
      showload:true,
      showcontent:false
    }
  },
  components:{
      split2,
      vueLoading
  },
  mounted:function(){
    var _this=this
    axios.post(sessionStorage.baseurl+"/a/phone/getOrderDataDetail",qs.stringify({openid:sessionStorage.openid,mainOrderId:this.$store.state.orderdata,token:sessionStorage.token}))
			.then(function(res){
				if(res.data.code==1){
          setTimeout(function(){
            _this.showload=!_this.showload
          _this.showcontent=!_this.showcontent
          },200)
          
				_this.$nextTick(function(){
					_this.detaildata=res.data.data
				})
				}
			})
			.catch(function(error){
				alert(error)
			})
  },
  methods:{
    goback:function(){
      this.$router.push("/")
    }
  }
}
</script>

<style lang="stylus">
.detailwarp
  width 100%
  height 100%
  background #f3f5f7
  .d-content
    width 90%
    margin auto
    overflow auto
    p.paid
      color #db2244
      font-size 0.35rem
    p
      width 100%
      margin auto
      text-align center
      font-size 0.3rem
      line-height 0.6rem
      padding 0.1rem 0.2rem
      box-sizing border-box
      background white
      overflow auto
      span 
        float left
        line-height 0.6rem
        font-size 0.3rem
        &:last-child 
          float right 
    ul
      background white
      padding-top 10px
      width 100%
      margin auto
      overflow auto
      li
        width 100%
        padding 0.1rem 0.2rem
        box-sizing border-box
        overflow auto
        span 
          line-height 0.6rem
          font-size 0.3rem
          float left
          &:last-child
            float right 
  .de-top
    width 100%
    flex 0.8rem
    text-align center
    line-height 0.8rem
    font-size 0.3rem
    .back
      position absolute
      height 0.6rem
      top 0.1rem
      left 0.2rem
      font-size 0.3rem
      line-height 0.6rem  
</style>
